<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:dt="http://github.com/dandelion/datatables"
	xmlns:sec="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Edit Use Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dhrubo" />

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/tablecloth.css" rel="stylesheet" />
<link href="css/bootstrap-editable.css" rel="stylesheet" />
<script src="js/jquery.js"></script>


<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->


<script src="js/jquery.bootstrap-growl.js"></script>


</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="#" style="color: yellow; font-weight: bold">Req1</a>
				<div class="nav-collapse collapse">

					<ul class="nav">
						<li><a href="home">Home</a></li>

						<li class="dropdown active"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Use Cases <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newusecase">New</a></li>
								<li><a href="listusecases">View All</a></li>

							</ul></li>

						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Projects <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="listprojects">View All</a></li>

							</ul></li>


						<li class="dropdown pull-right"
							sec:authorize="hasRole('ROLE_COMPANY_ADMIN')"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Users <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newuser">New</a></li>
								<li><a href="listusers">View All</a></li>

							</ul></li>


						<li class="dropdown pull-right"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Tickets <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="viewallprojects">View All</a></li>

							</ul></li>

						<li><a href="#about">Help</a></li>
						<li><a href="#contact">Contact</a></li>


					</ul>


					<div class="pull-right">
						<ul class="nav pull-right">
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								th:text="'Hi! ' + ${#authentication.name}"
								data-toggle="dropdown">Welcome, User <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="/user/preferences"><i class="icon-cog"></i>
											Preferences</a></li>
									<li><a href="/help/support"><i class="icon-envelope"></i>
											Contact Support</a></li>
									<li class="divider"></li>
									<li><a href="/auth/logout"><i class="icon-off"></i>
											Logout</a></li>
								</ul></li>
						</ul>
					</div>




				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container-fluid">

		<div class="row-fluid">
			<div class="span6">
				<ul class="breadcrumb">
					<li><a href="#">Home</a> <span class="divider">/</span></li>
					<li><a href="#">List Use Cases</a> <span class="divider">/</span></li>
					<li class="active" th:text="'Edit Use Case : ' + ${useCase.name}"></li>
				</ul>
			</div>
			<div class="span6">
				<div class="btn-group pull-right">
					<button class="btn btn-primary" type="button">Print</button>
					<button class="btn btn-success" type="button">Request
						Review</button>
					<button class="btn btn-danger" type="button">
						<i class="icon-trash icon-white"></i>Delete
					</button>

					<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
						Export <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">As Microsoft Word</a></li>
						<li><a href="#">As Adobe PDF</a></li>
						<li><a href="#">As LibreOffice Writer</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="row-fluid">

			<div class="span12">


				<div class="tabbable">
					<!-- Only required for left/right tabs -->
					<ul class="nav nav-tabs">
						<li th:class="${active} == 1? 'active' : ''"><a href="#tab1"
							data-toggle="tab">Identification</a></li>
						<li th:class="${active} == 2? 'active' : ''"><a href="#tab2"
							data-toggle="tab">Actors</a></li>
						<li th:class="${active} == 3? 'active' : ''"><a href="#tab3"
							data-toggle="tab">Pre/Post Conditions</a></li>
						<li th:class="${active} == 4? 'active' : ''"><a href="#tab4"
							data-toggle="tab">Priority</a></li>
						<li th:class="${active} == 5? 'active' : ''"><a href="#tab5"
							data-toggle="tab">Frequency</a></li>
						<li th:class="${active} == 6? 'active' : ''"><a href="#tab6"
							data-toggle="tab">Main Flow</a></li>
						<li th:class="${active} == 7? 'active' : ''"><a href="#tab7"
							data-toggle="tab">Alternate Flows</a></li>
						<li th:class="${active} == 8? 'active' : ''"><a href="#tab8"
							data-toggle="tab">Exceptions</a></li>
						<li th:class="${active} == 9? 'active' : ''"><a href="#tab9"
							data-toggle="tab">Includes</a></li>
						<li th:class="${active} == 10? 'active' : ''"><a
							href="#tab10" data-toggle="tab">Special Requirements</a></li>
						<li th:class="${active} == 11? 'active' : ''"><a
							href="#tab11" data-toggle="tab">Assumptions</a></li>
						<li th:class="${active} == 12? 'active' : ''"><a
							href="#tab12" data-toggle="tab">Notes and Issues</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane" id="tab1"
							th:class="${active} == 1? 'tab-pane active' : 'tab-pane'">

							<form action="authentication" th:action="@{/updateusecase}"
								th:object="${useCase}" method="post">

								<fieldset>
									<table style="width: 100%">



										<tr class="control-group"
											th:class="${#fields.hasErrors('name')} ? 'control-group error' : 'control-group'">
											<td class="inputLabel" style="width: 10%"><label>Name
											</label></td>
											<td><input type="text" th:field="*{name}"
												autofocus="autofocus" class="input span9"
												placeholder="Use case name" required="required" /> <span
												class="help-inline error"
												th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Use
													case name is required.</span> <input type="hidden"
												th:field="*{id}" /></td>
										</tr>

										<tr class="control-group">
											<td class="inputLabel" style="width: 10%"><label>Description</label></td>
											<td class="controls"><textarea rows="3" cols="20"
													th:field="*{description}" autofocus="autofocus"
													class="input span9" placeholder="Description"></textarea></td>
										</tr>

										<tr class="control-group">
											<td class="inputLabel" style="width: 10%"><label>Created
													By</label></td>
											<td class="controls"><span th:text="*{createdBy.name}"
												class="label label-info"></span></td>
										</tr>

										<tr class="control-group">
											<td class="inputLabel" style="width: 10%"><label>Created
													Date</label></td>
											<td class="controls"><span th:text="*{createdDate}"
												class="label label-info"></span></td>
										</tr>

										<tr class="control-group">
											<td class="inputLabel" style="width: 10%"><label>Last
													Updated By</label></td>
											<td class="controls"><span
												th:text="*{lastUpdatedBy.name}" class="label label-info"></span></td>
										</tr>

										<tr class="control-group">
											<td class="inputLabel" style="width: 10%"><label>Last
													Updated Date</label></td>
											<td class="controls"><span th:text="*{lastUpdatedDate}"
												class="label label-info"></span></td>
										</tr>

									</table>

								</fieldset>
								<div class="form-actions">
									<button type="submit" class="btn btn-success">Save</button>
									<button type="reset" class="btn btn-info">Cancel</button>
								</div>
							</form>

						</div>
						<div class="tab-pane" id="tab2"
							th:class="${active} == 2? 'tab-pane active' : 'tab-pane'">
							<p>Howdy, I'm in Section 2.</p>
						</div>

						<div class="tab-pane" id="tab3"
							th:class="${active} == 3? 'tab-pane active' : 'tab-pane'">


							<table class="condition">
								<thead>
									<tr>
										<th colspan="3">Pre Condition(s)</th>
									</tr>

									<tr>
										<th colspan="3">

											<form action="addprecondition">


												<input type="hidden" name="usecase" th:value="${useCase.id}" />


												<div class="input-append span10">
													<input class="input span12" id="description"
														type="text" placeholder="Description" name="description" />
													<button class="btn btn-success" type="submit">Save</button>
												</div>



											</form>
										</th>

									</tr>

									<tr>
										<th style="width: 5%">Sl#</th>

										<th>Description</th>
										<th style="width: 3%">Action</th>
									</tr>
								</thead>
								<tbody>


									<tr th:each="p, rowStat : ${useCase.preConditions}">
										<td style="width: 5%" th:text="${rowStat.count}">1</td>
										<td th:text="${p}"></td>

										<td>

											<div class="btn-group pull-right"></div>

										</td>
									</tr>

								</tbody>
							</table>

							<table class="condition">
								<thead>
									<tr>
										<th colspan="3">Post Condition(s)</th>
									</tr>

									<tr>
										<th colspan="3">

											<form action="addpostcondition">
												<input type="hidden" name="usecase" th:value="${useCase.id}" />


												<div class="input-append span10">
													<input class="input span12" id="description"
														type="text" placeholder="Description" name="description" />
													<button class="btn btn-success" type="submit">Save</button>
												</div>
												
												
												
											</form>
										</th>

									</tr>

									<tr>
										<th style="width: 5%">Sl#</th>

										<th>Description</th>
										<th style="width: 3%">Action</th>
									</tr>
								</thead>
								<tbody>


									<tr th:each="p, rowStat : ${useCase.postConditions}">
										<td style="width: 5%" th:text="${rowStat.count}">1</td>
										<td th:text="${p}"></td>

										<td>

											<div class="btn-group pull-right"></div>

										</td>
									</tr>

								</tbody>
							</table>
						</div>

						<div class="tab-pane" id="tab4"
							th:class="${active} == 4? 'tab-pane active' : 'tab-pane'">
							<p>Howdy, I'm in Section 4.</p>
						</div>

						<div class="tab-pane" id="tab5"
							th:class="${active} == 5? 'tab-pane active' : 'tab-pane'">
							<p>Howdy, I'm in Section 5.</p>
						</div>

						<div class="tab-pane active" id="tab6"
							th:class="${active} == 6? 'tab-pane active' : 'tab-pane'">


							<div class="row-fluid">
								<div class="span12">

									<table id="example-paper">
										<thead>
											<tr>
												<th colspan="3">Main Flow</th>
											</tr>

											<tr>
												<th colspan="3">

													<form action="addmainflow">

														<textarea rows="1" cols="20" name="step"
															autofocus="autofocus" class="input span9"
															placeholder="Description"></textarea>

														<input type="hidden" name="id" th:value="${useCase.id}" />

														<button type="submit" class="btn btn-success">Save</button>
													</form>
												</th>

											</tr>

											<tr>
												<th style="width: 5%">Step</th>

												<th>Definition</th>
												<th style="width: 3%">Action</th>
											</tr>
										</thead>
										<tbody>


											<tr th:each="s, rowStat : ${useCase.mainFlow.steps}">
												<td style="width: 5%" th:text="${rowStat.count}">1</td>
												<td class="editable"><a href="#"
													th:attr="data-pk=${useCase.id}, data-name=${rowStat.index}"
													th:text="${s.description}">Mike</a></td>

												<td>

													<div class="btn-group pull-right">
														<a
															th:href="@{/moveup(usecase=${useCase.id}, index=${rowStat.index})}"
															class="btn btn-primary">Up</a> <a
															th:href="@{/movedown(usecase=${useCase.id}, index=${rowStat.index})}"
															class="btn btn-primary">Down</a> <a
															th:href="@{/deleteucstep(usecase=${useCase.id}, index=${rowStat.index})}"
															class="btn btn-danger">Delete</a> <a class="btn"
															th:href="@{/newalternate(usecase=${useCase.id}, index=${rowStat.index})}">Alternate</a>
													</div>

												</td>
											</tr>

										</tbody>
									</table>

								</div>
							</div>
						</div>

						<div class="tab-pane" id="tab7"
							th:class="${active} == 7? 'tab-pane active' : 'tab-pane'">
							<div th:each="f, stat : ${useCase.mainFlow.steps}">
								<div class="row-fluid" th:each="s , statinner : ${f.alternates}"
									th:unless="${#lists.isEmpty(f.alternates)}">

									<div class="span12">
										<table class="alternate">
											<thead>
												<tr>
													<th colspan="3"><a
														th:name="'alt'+${stat.index}+${statinner.index}"
														th:text="'Alternate Flow - ' + ${stat.count} + '.' + ${statinner.count}"></a>
													</th>
												</tr>

												<tr>
													<th colspan="3">

														<form action="addalternateflowstep">

															<textarea rows="1" cols="20" name="description"
																autofocus="autofocus" class="input span9"
																placeholder="Description"></textarea>

															<input type="hidden" name="id" th:value="${useCase.id}" />

															<input type="hidden" name="stepid"
																th:value="${stat.index}" /> <input type="hidden"
																name="flowid" th:value="${statinner.index}" />

															<button type="submit" class="btn btn-success">Save</button>
														</form>
													</th>

												</tr>

												<tr>
													<th style="width: 5%">Step</th>

													<th>Definition</th>
													<th style="width: 3%">Action</th>
												</tr>


											</thead>
											<tbody>


												<tr th:each="k, rowStat : ${s.steps}">
													<td style="width: 5%" th:text="${rowStat.count}">1</td>
													<td class="editable"><a href="#"
														th:attr="data-pk=${useCase.id}, data-name=${rowStat.index}"
														th:text="${k.description}">Mike</a></td>

													<td>

														<div class="btn-group pull-right">
															<a
																th:href="@{/moveupalternate(usecase=${useCase.id}, index=${rowStat.index}, stepid=${stat.index}, flowid=${statinner.index})}"
																class="btn btn-primary">Up</a> <a
																th:href="@{/movedownalternate(usecase=${useCase.id}, index=${rowStat.index}, stepid=${stat.index}, flowid=${statinner.index})}"
																class="btn btn-primary">Down</a> <a
																th:href="@{/deletestepalternate(usecase=${useCase.id}, index=${rowStat.index}, stepid=${stat.index}, flowid=${statinner.index})}"
																class="btn btn-danger">Delete</a>
														</div>

													</td>
												</tr>

											</tbody>
										</table>
									</div>
								</div>

							</div>

						</div>

						<div class="tab-pane" id="tab8"
							th:class="${active} == 8? 'tab-pane active' : 'tab-pane'">
							<p>Howdy, I'm in Section 8.</p>
						</div>

						<div class="tab-pane" id="tab9"
							th:class="${active} == 9? 'tab-pane active' : 'tab-pane'">
							<p>Howdy, I'm in Section 9.</p>
						</div>

						<div class="tab-pane" id="tab10"
							th:class="${active} == 10? 'tab-pane active' : 'tab-pane'">
							<p>Howdy, I'm in Section 10.</p>
						</div>
					</div>
				</div>




			</div>
			<!--/span-->





		</div>
		<!--/row-->

		<hr />

		<footer>
			<p>&copy; Company 2013</p>
		</footer>

	</div>





	<!--/.fluid-container-->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script src="js/bootstrap-transition.js"></script>
	<script src="js/bootstrap-alert.js"></script>
	<script src="js/bootstrap-modal.js"></script>
	<script src="js/bootstrap-dropdown.js"></script>
	<script src="js/bootstrap-scrollspy.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
	<script src="js/bootstrap-popover.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script src="js/bootstrap-collapse.js"></script>
	<script src="js/bootstrap-carousel.js"></script>
	<script src="js/bootstrap-typeahead.js"></script>

	<script src="js/jquery.tablecloth.js"></script>

	<script src="js/bootstrap-editable.js"></script>

	<script src="js/editusecase.js"></script>



</body>
</html>
